<template>
  <el-card>
    <div>
      <div class="list-h">
        <div>
          <el-button
            type="primary"
            v-auth="`/project/manHour-add`"
            @click="handleAdd"
            class="add-option"
            >填报工时
          </el-button>

          <el-button
            type="primary"
            @click="exportExcel"
            class="add-option"
            v-auth="`/expert/wrokinghour`"
            >导出
          </el-button>
        </div>
        <el-form
          :inline="true"
          class="demo-form-inline"
          :model="formInline"
          ref="formRef"
          @submit.prevent
        >
          <el-form-item label="项目名称" prop="projectName">
            <el-input
              v-model.trim="formInline.projectName"
              clearable
              class="width-custom120"
            ></el-input>
          </el-form-item>
          <el-form-item label="项目编号" prop="projectCode">
            <el-input
              v-model.trim="formInline.projectCode"
              clearable
              class="width-custom120"
            ></el-input>
          </el-form-item>

          <el-form-item label="工时月份" prop="fillMonth">
            <el-date-picker
              value-format="YYYY-MM"
              class="year-picker"
              v-model="formInline.fillMonth"
              type="month"
            />
          </el-form-item>

          <el-form-item label="填报人" prop="createUserName">
            <el-input
              v-model.trim="formInline.createUserName"
              clearable
              class="width-custom120"
            ></el-input>
          </el-form-item>

          <el-form-item label="填报时间" prop="createTime">
            <el-date-picker
              class="width-custom220"
              v-model="createTime"
              type="daterange"
              range-separator="-"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              value-format="YYYY-MM-DD"
              @change="handleChangeDate"
            />
          </el-form-item>

          <el-form-item>
            <el-button @click="handleReset">重置</el-button>
            <el-button type="primary" @click="handleSearch">查询</el-button>
          </el-form-item>
        </el-form>
      </div>

      <el-skeleton style="height: 50vh" :rows="8" :loading="loading" animated>
        <el-table
          :data="tableData"
          border
          style="width: 100%"
          v-loading="loading"
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
        >
          <template #empty>
            <el-empty :image-size="150" description="暂无数据"></el-empty>
          </template>
          <el-table-column type="index" label="序号" width="50">
            <template v-slot="scope">
              <span>{{
                (formInline.pageNum - 1) * formInline.pageSize +
                scope.$index +
                1
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="projectCode"
            label="项目编号"
          ></el-table-column>
          <el-table-column
            prop="projectName"
            label="项目名称"
            show-overflow-tooltip
          ></el-table-column>

          <el-table-column prop="fillMonth" label="工时月份"></el-table-column>

          <el-table-column prop="totalHour" label="工时总计(天)"></el-table-column>

          <el-table-column
            prop="totalPerson"
            label="填报人数"
          ></el-table-column>

          <el-table-column
            prop="createUserName"
            label="填报人"
          ></el-table-column>

          <el-table-column
            prop="createTime"
            label="填报时间"
            :min-width="80"
          ></el-table-column>

          <el-table-column
            prop="approvalStatusName"
            label="审批状态"
            :min-width="80"
          ></el-table-column>

          <el-table-column label="操作" width="140" fixed="right">
            <template #default="{ row }">
              <el-button
                type="text"
                v-if="row.approvalStatus === '2' || row.approvalStatus === '3'"
                v-auth="`/project/manHour-look`"
                @click="handleLook(row)"
                >查看
              </el-button>

              <el-button
                v-if="row.approvalStatus === '1'"
                v-auth="`/project/manHour/edit`"
                type="text"
                size="small"
                @click="handleEdit(row)"
                >编辑
              </el-button>

              <el-popconfirm
                confirm-button-text="确定"
                cancel-button-text="取消"
                icon="el-icon-info"
                icon-color="red"
                title="确定删除该条记录吗？"
                @confirm="handleDelete(row)"
              >
                <template #reference>
                  <el-button v-auth="`/project/manHour-del`" type="text"
                    >删除
                  </el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </el-skeleton>
    </div>
    <re-pagination
      :total="total"
      v-show="total > 0"
      v-model:page="formInline.pageNum"
      v-model:limit="formInline.pageSize"
      @pagination="handleSearch"
    />
  </el-card>
</template>

<script lang="ts">
import { reactive, toRefs, ref, defineComponent } from "vue";
import { workingHourList, workingHourDelete } from "/@/api/project";
import { useRouter } from "vue-router";
import NotifMessage from "/@/utils/message/notification";
import { cloneDeep } from "lodash-es";
import { postDictList } from "/@/api/common";
import { postDownload } from "/@/utils/download";

export default defineComponent({
  name: "UserManage",
  components: {},
  setup() {
    const router = useRouter();
    const formRef = ref<HTMLFormElement | null>(null) as any;
    let loading = ref<boolean>(false);
    let total = ref<number>(0);
    let formInline = reactive<any>({
      projectName: "",
      projectCode: "",
      fillMonth: "",
      createUserName: "",
      startTime: "",
      endTime: "",
      pageSize: 10,
      pageNum: 1
    });
    let approvalList = ref([]);
    let state = reactive({
      createTime: "",
      tableData: []
    });

    const getTableData = async () => {
      loading.value = true;
      try {
        let copyParams = cloneDeep(formInline);
        const { code, data } = await workingHourList(copyParams);
        if (code === 200) {
          state.tableData = data.list;
          total.value = data.rows;
        }
      } catch (err) {
        console.log(err);
      } finally {
        loading.value = false;
      }
    };

    // 清除表单，重置
    const handleReset = () => {
      formRef.value.resetFields();
      formInline.startTime = "";
      formInline.endTime = "";
      formInline.projectName = "";
      formInline.projectCode = "";
      state.createTime = "";
      getTableData();
    };


    const handleChangeDate = e => {
      formInline.startTime = e ? e[0] : "";
      formInline.endTime = e ? e[1] : "";
    };

    // 根据条件进行搜索
    const handleSearch = (): void => {
      getTableData();
    };

    // 删除记录
    const handleDelete = async item => {
      try {
        const { code, message } = await workingHourDelete({ id: item.id });
        if (code === 200) {
          NotifMessage.success(`${message}`);
          getTableData();
        } else {
          NotifMessage.error(`${message}`);
        }
      } catch (err) {
        console.log(err);
      }
    };

    const exportExcel = async () => {
      await postDownload(
        `/rdms-admin/workingHour/export`,
        `项目工时.xlsx`,
        formInline
      );
    };

    // 创建项目
    const handleAdd = (): void => {
      router.push({ path: "/project/manHour/detail", query: { mode: "add" } });
    };

    // 项目详情
    const handleLook = (row): void => {
      router.push({
        path: "/project/manHour/detail",
        query: {
          id: row.id,
          mode: "look",
          flowId: row.flowId,
          taskId: row.curTaskId,
          instanceId: row.instanceId,
          nodeId: row.nodeStatusCode,
          isSkipYs: row.isSkipYs
        }
      });
    };

    const handleEdit = (row): void => {
      const cantype = row.canProcess === 1 && row.saveStatus === "3" ? 1 : 2;
      router.push({
        path: "/project/manHour/detail",
        query: { id: row.id, mode: "edit", cantype }
      });
    };

    const initScientificDictList = async () => {
      try {
        const params = {
          dicType: "rd_sci_app_status"
        };
        const { code, data } = await postDictList(params);
        if (code === 200) {
          approvalList.value = data;
        }
      } catch (err) {
        console.log(err);
      }
    };

    getTableData();
    initScientificDictList();
    return {
      handleChangeDate,
      loading,
      formInline,
      formRef,
      total,
      ...toRefs(state),
      handleAdd,
      handleReset,
      handleSearch,
      handleDelete,
      handleLook,
      handleEdit,
      approvalList,
      exportExcel
    };
  }
});
</script>
